<template>
	<view class="goodsDetail">
		<view class="detailImg">
			<u-swiper name="file_url" @click="clickImg" mode="number" :autoplay="false" 
			img-mode="scaleToFill" indicator-pos="topLeft" :height="600" 
			:list="goodsInfo.image"></u-swiper>
		</view>
		<view class="price_box" style="background: url(https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/group_price_bg.png) no-repeat;background-size: 100% 100%;">
			<view class="price_txt" style="display: flex;flex-direction: column;">
				<view>¥<text>{{goodsInfo.price}}</text></view>
				<view>
					<text style="font-size: 25rpx;">单独购买：¥{{goodsInfo.line_price}}</text>
				</view>
				<view></view>
			</view>
			<view style="font-size: 25rpx;text-align: right;">
				<view>距离结束<u-count-down font-size="25" separator-size="25" :timestamp="goodsInfo.have_time" separator-color="#fff" color="#fff" bg-color="rbga(0,0,0,0)"></u-count-down></view>
				<view style="margin-top: 10rpx;"><u-tag :text="goodsInfo.text" bg-color="#ffffff" color="#ff6361" mode="dark" /></view>
			</view>
		</view>
		<view class="goods_info">
			<view class="goods_tit">{{goodsInfo.goods_name}}</view>
			<view class="goods_remark">{{goodsInfo.brief}}</view>
		</view> 
		<view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">去拼团</text>
			<text @click="addGroupon">加入拼团团队</text>
		</view>
		<view class="norms">
			<text style="color: #909399;margin-right: 20rpx;">服务</text>
			<view v-for="(item, index) in services" :key="index">
				<image :src="item.icon"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<view style="padding-bottom: 200rpx;">
			<u-sticky>
				<u-tabs active-color="#20cbd4" :list="tabsList" :is-scroll="false"></u-tabs>
			</u-sticky>
			<view><rich-text :nodes="htmlNode"></rich-text></view>
		</view>
		
		<view class="navigation">
			<view class="left">
				<view class="item" @click="iconClick(0)">
					<image style="width: 40rpx;height: 40rpx;" src="/static/tabbar/tab_home_sel.png"></image>
					<view class="text u-line-1">首页</view>
				</view>
				<view class="item" @click="iconClick(1)">
					<image style="width: 40rpx;height: 40rpx;" src="https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/share.png"></image>
					<view class="text u-line-1">分享</view>
				</view>
			</view>
			<view class="right">
				<view class="cart u-line-1 pintuanBtn" @click="showGoodsPopup(1)">单独购买<view style="font-size: 20rpx;">¥{{goodsInfo.line_price}}</view></view>
				<view class="buy u-line-1 pintuanBtn" @click="showGoodsPopup(2)">我要开团<view style="font-size: 20rpx;">¥{{goodsInfo.price}}</view></view>
			</view>
		</view>
		
		<u-popup class="goodsPopup" mode="bottom" :border-radius="30" height="380" v-model="showPopup">
			<scroll-view scroll-y="true" style="height: 200rpx;"> 
				<view class="goodsInfoPop">
					<image :src="goodsInfo.image_first"></image>
					<view class="infoRight">
						<view class="goods_tit u-line-2">{{goodsInfo.goods_name}}</view>
						<view class="pricebox_pop">
							<view class="pricePop" v-if="is_group == -1">¥{{goodsInfo.line_price}}</view>
							<view class="pricePop" v-else>¥{{goodsInfo.price}}</view>
							<view>库存{{goodsInfo.stock}}件</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="pop_num">
				<view class="goods_tit">购买数量</view>
				<view><u-number-box :disabled-input="true" color="#20cbd4" :step="1" :min="1" :max="999" v-model="popNumber"></u-number-box></view>
			</view>
			<view class="confrim-btn"> 
				<u-button @click="confrimClick" :custom-style="confrimStyle" hover-class="none" shape="circle" plain>确定</u-button>
			</view>
		</u-popup>
		<u-popup v-model="showModel" mode="center" width="70%" height="50%" :mask-close-able="false"
			:border-radius="20" :closeable="true">
			<view v-if="isEmpty" style="display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100%;">
				
				<view style="margin-bottom: 15rpx;">暂无成团信息</view><u-button size="mini" type="error" @click="openGroupon()">请开团</u-button>
			</view>
			<view class="model_box" v-if="!isEmpty">
				<view class="model_title">可参与的拼单</view>
				<view class="model_item" v-for="(item, index) in groupList">
					<view style="width: 100rpx;">
						<u-swiper :height="100" :border-radius="50" :list="item.head_img" mode="none" ></u-swiper>
					</view>
					<view style="margin: 0 10rpx; width: 250rpx;">
						<view class="u-line-1">{{item.user_name}}</view>
						<view class="u-line-1 model_remark">{{item.text}}</view>
					</view>
					<view v-if="item.is_join == 0"><u-button size="mini" type="error" @click="buyGroupon(item.sharing_group_id)">去拼单</u-button></view>
					<view v-if="item.is_join == 1"><u-button size="mini" type="info" >已参团</u-button></view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
		<u-popup v-model="showModel" mode="center" width="80%" height="70%" :border-radius="20">
			<view class="myextension">
				<block class="mycanvas">
					<image class="imgs" style="width:280px;height:400px" :src="imgUrl" mode=""></image>
				</block>
				<!-- #ifndef H5 -->
				<view class="saveImg" @tap="saveImg" style="background:#20cbd4">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<p class="tips">长按图片进行保存</p>
				<!-- #endif -->
			</view>
		</u-popup>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {sharingDetail,isLogin,sharingGroupList,goodsBanner} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	export default {
		components: {
			loginModel,
			hoverMenu
		},
		data() {
			return { 
				avatarList:[
					"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1580212790,3887210754&fm=26&gp=0.jpg",
					"https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2776786863,2619058922&fm=26&gp=0.jpg",
					"https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2152275414,3673602278&fm=26&gp=0.jpg"
				],
				goodsInfo:{},
				file_url:"",//规格中图片
				htmlNode:"",//商品详情
				tabsList: [{
					name: '商品详情'
				}],
				services:[
					{name:"极速退款",icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/serviceshandiantuikuan.png"},
					{name:"正品保障",icon:"https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/miniprogram/images/images/zhengpinbaozhangxian.png"}
				],
				customStyle:{
					color:"#20cbd4",
					border:"5rpx #20cbd4",
					marginBottom:"10rpx"
				},
				confrimStyle:{
					color:"#f5fdfe",
					border:"5rpx #20cbd4",
					background:"#20cbd4"
				},
				isEmpty:false,
				groupList:[],//成团记录
				showPopup:false,
				popNumber:1,
				showModel:false,
				is_group:-1,   //-1 单独购买 0 成立新团 其他 参团id
				showModel:false,
				imgUrl:"", //分享图片
			}
		},
		onLoad(option) {
			this.selectGoodsInfo(option.sharing_id);
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			selectGoodsInfo(sharing_id){
				sharingDetail(this,{sharing_id:sharing_id});
			},
			setFrom(html) {
				//处理富文本 让图片居中适应
				let newContent = html.replace(/\<img/gi, '<img class="rich-img" ');
				this.htmlNode = newContent
			},
			clickImg(index){
				let that=this;
				var img = [];
				for(var i in that.goodsInfo.image){
					img.push(that.goodsInfo.image[i].file_url)
				}
				// 预览图片
				uni.previewImage({
					urls: img,
					longPressActions: {
						itemList: ['保存图片'],
						success: function(data) {
						    that.saveImg(img[data.index],that)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			saveImg(url,that){
				uni.downloadFile({
					url:url,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function () {
								uni.showToast({
									title: '保存成功',
									icon: 'success', 
									icon: true
								});
							}
						});
					}
				});
			},
			iconClick(index){
				if(index==0){
					uni.switchTab({
						url:"/pages/tabBar/home"
					})
				}else if(index==1){
					//分享
					isLogin(this,{type:3});
					goodsBanner(this,{goods_id:this.goodsInfo.sharing_id,type:2})
				}
			},
			//index:1单独购买 2我要开团
			showGoodsPopup(index){
				// #ifdef H5
					let ua = window.navigator.userAgent.toLowerCase()
					if (ua.match(/MicroMessenger/i) == 'micromessenger') {
						if(uni.getStorageSync("openidGzh")==null||uni.getStorageSync("openidGzh")==""){
							uni.navigateTo({
								url:"/pages/views/authorization?state="+this.goodsInfo.sharing_id,
								success() {
									this.$u.toast("未授权微信公众号支付，请点击授权")
								}
							})
						}
							
						
					}
				// #endif
				if(this.goodsInfo.is_creator == 1){
					this.$refs.uToast.show({title: '已开团'});
					return;
				}
				if(index == 1){
					this.is_group = -1
				}else{
					this.is_group = 0
				}
				isLogin(this,{type:2});
			},
			confrimClick(){
				if(this.popNumber>this.goodsInfo.stock){
					this.$refs.uToast.show({title: '库存不足'});
					return;
				}
				this.showPopup=false;
				//立即购买
				uni.navigateTo({
				  url: '/sharing/confrimOrder?active_id='+this.goodsInfo.sharing_id+'&num='+this.popNumber+'&is_group='+this.is_group
				});
			},
			addGroupon(){
				this.showModel=true;
				sharingGroupList(this,{sharing_id:this.goodsInfo.sharing_id})
			},
			buyGroupon(sharing_group_id){
				this.is_group = sharing_group_id;
				this.showModel=false;
				this.showPopup=true;
			},
			openGroupon(){
				this.showModel = false;
				this.is_group = 0;
				isLogin(this,{type:2});
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.detailImg{
		height: 600rpx;
	}
	.price_box{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		font-size: 30rpx;
	}
	.price_txt{
		display: flex;
	}
	.price_txt view{
		font-size: 25rpx;
		margin-right: 20rpx;
	}
	.price_txt text{
		margin: 0 10rpx;
		font-size: 40rpx;
		font-size: 600;
	}
	.u_price{
		text-decoration: line-through;
		line-height: 70rpx;
	}
	.goods_info{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
	}
	.goods_tit{
		font-size: 30rpx;
		margin-bottom: 15rpx;
	}
	.goods_remark{
		color: #0e595d;
	}
	.norms{
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}
	.norms view{
		display: flex;
		align-items: center;
	}
	.norms view image{
		width: 40rpx;
		height: 40rpx; 
		margin-right: 5rpx;
		margin-left: 10rpx; 
	}
	.commentItem{
		margin: 20rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
	.userInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.userInfo text{
		margin-left: 20rpx;
		color: #909399;
	}
	.reply{
		background-color: #f6f6f6;
		padding: 10rpx;
		border-radius: 10rpx;
	}
	.allBtn{
		text-align: center;
	}
	.goodsInfoPop{
		display: flex;
		padding: 20rpx 30rpx;
	}
	.goodsInfoPop image{
		width: 150rpx;
		height: 150rpx;
	}
	.infoRight{
		margin-left: 10rpx;
		width: 530rpx;
	}
	.pricebox_pop{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #909399;
	}
	.pricePop{
		font-size: 40rpx;
		color: #FA3534;
	}
	.norm_item{
		padding: 20rpx 30rpx;
	}
	.confrim-btn{
		padding: 0 50rpx;
	} 
	.pop_num{
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.pintuanBtn{
		line-height: 36rpx;
		padding: 0 30rpx;
		border-radius: 36rpx;
		color: #ffffff;
		text-align: center;
	}
	.commentImg{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	.commentImg image{
		width: 150rpx;
		height: 150rpx;
		margin-right: 10rpx;
	}
	.model_box{
		padding: 20rpx;
	}
	.model_title{
		font-size: 30rpx;
		font-weight: 700;
		padding: 0 0 10rpx;
	}
	.model_item{
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom:1rpx solid #e4e7ed;
	}
	.model_remark{
		font-size: 22rpx;
		margin-top: 10rpx;
		color: #909399;
	}
</style>
<style lang="scss" scoped>
.navigation {
	display: flex;
	margin-top: 100rpx;
	background-color: #ffffff;
	padding: 16rpx 16rpx;
	width: 750rpx;
	position: fixed;
	bottom: 0;
	z-index: 10;
	justify-content: space-between;
	.left {
		display: flex;
		font-size: 20rpx;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			text-align: center;
		}
		.cart {
			background: linear-gradient(90deg,#676869,#525252);
			margin-right: 30rpx;
		}
		.buy {
			background: linear-gradient(90deg,#13797f,#20cbd4);
		}
		.seckill {
			background: linear-gradient(93deg,#d01325,#ed3c30);
			width: 350rpx;
		}
	}
}
.myextension {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.myextension image {
		display: block;
	}

	.saveImg {
		width: 300upx;
		height: 80upx;
		border-radius: 40upx;
		box-shadow: 0 10upx 10upx #ddd;
		background-color: pink;
		line-height: 80upx;
		text-align: center;
		color: #fff;
		margin: 0 auto;
		margin-top: 940upx;
	}

	.mycanvas {
		margin: 0 auto;
		transform: translateY(30upx);
		border-radius: 10upx;
		overflow: hidden;
	}

	.imgs {
		position: absolute;
		top: 70upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10upx;
		overflow: hidden;
	}
	.tips{
		text-align: center;
		color: #999;
		font-size: 24upx;
		margin-top: 1100upx;
	}
</style>
